<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form ref="form" :rules="rules" :model="form"  label-width="100px">
                    <el-form-item label="渠道类型" prop="type">
                        <el-select v-model="form.type" class="filter-item" placeholder="渠道类型" style="width: 150px;">
                            <el-option
                                v-for="(item, index) in options.type"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系统类型" prop="os">
                        <el-radio-group v-model="form.os">
                            <el-radio-button :label="item.value" v-for="(item, index) in backendOptions.os" :key="index">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="渠道号" prop="id">
                        <el-input :readonly="!isCreate" v-model.number="form.id" placeholder="渠道号" style="width: 150px;"/>
                    </el-form-item>
                    <el-form-item label="渠道名称" prop="name">
                        <el-input v-model="form.name" placeholder="渠道名称"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道说明" prop="desc">
                        <el-input type="textarea" v-model="form.desc" placeholder="渠道说明"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道方案" prop="app_source_config_id">
                        <select-app-source-config v-model="form.app_source_config_id" :form="true" :clearable="false"></select-app-source-config>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio-button :label="item.value" v-for="(item, index) in options.status" :key="index">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="注册" prop="register">
                        <el-switch v-model="form.register" :active-value="1" :inactive-value="0"/>
                    </el-form-item>
                    <el-form-item label="审核模式" prop="audit">
                        <el-switch v-model="form.audit" :active-value="1" :inactive-value="0"/>
                        <span class="color-danger">审核模式开启后所有新注册用户会被标记为'审核'</span>
                    </el-form-item>
                    <el-form-item label="数据上报" prop="data_report">
                        <el-switch v-model="form.data_report" :active-value="1" :inactive-value="0"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                        <el-button @click="cancel">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SelectAppSourceConfig from '~/components/Select/app-source-config'

export default {
    props: {
        data: {}
    },
    components: {
        SelectAppSourceConfig,
    },
    data() {
        return {
            loading: false,
            form: {},
            formDefault: {
                id: '',
                name: '',
                desc: '',
                type: 0,
                os: 0,
                status: 0,
                register: 1,
                audit: 0,
                app_source_config_id: 0,
                data_report: 0,
            },
            rules: {
                id: {required: true, message: '请输入渠道编号', trigger: 'blur',},
                name: {required: true, message: '请输入渠道名称', trigger: 'blur',},
                status: {required: true, message: '请选择状态', trigger: 'blur',},
                type: {required: true, message: '请选择渠道类型', trigger: 'blur',},
                os: {required: true, message: '请选择系统类型', trigger: 'blur',},
            },
            options: this.$store.state.appSource.options,
            backendOptions: this.$store.state.backend.options,
            isCreate: true,
        }
    },
    computed: {},
    watch: {
        data(newVal) {
            this.syncForm();
        },
        'form.id' () {
            if (this.isCreate) this.makeName();
        },
        'form.type' () {
            if (this.isCreate) this.makeName();
        }
    },
    methods: {
        getFormAction() {
            return this.isCreate ? 'appSource/Store' : 'appSource/Update';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                    this.$message.success(res.data.message);
                    // 更新缓存
                    this.$store.dispatch('appSource/All', 'appSource');
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form = Object.assign({}, this.data.id ? this.data : this.formDefault);
            this.isCreate = this.form.id <= 0;
        },
        makeName() {
            if (!this.form.id) return ;
            this.form.name = this.options.type[this.form.type].label + this.form.id;
        }
    },
    created() {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

